<template>
  <div>
    <el-dialog
      title="摄像头监控"
      :close-on-click-modal="false"
      :visible.sync="visible"
      class="JADP-dialog JADP-dialog_center"
      lock-scroll
      width="75%"
      v-loading="loading"
      append-to-body
    >
      <ul v-if="list.length" class="picture">
        <li v-for="(item, index) in list" :key="index">
          <div class="photo">
            <!-- <img v-if="item.snapshots" :src="item.snapshots" alt="" /> -->
            <el-image
              v-if="item.snapshots"
              style="width: 100%; height: 100%"
              :src="item.snapshots"
              :preview-src-list="previewImg(index)"
            />
            <span v-else>学员未开启摄像头</span>
          </div>
          <div class="time">
            <span>{{ item.verifytime }}</span>
          </div>
        </li>
      </ul>
      <el-empty class="empty" v-else description="暂无数据"></el-empty>
      <pagination
        :total="total"
        :page.sync="listQuery.currentPage"
        :limit.sync="listQuery.pageSize"
        @pagination="init(learningRecordId)"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "",
  data() {
    return {
      visible: false,
      loading: false,
      learningRecordId: "",
      list: [],
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: ""
      }
    };
  },

  methods: {
    init(id) {
      this.visible = true;
      this.loading = true;
      this.learningRecordId = id;
      this.request({
        url: "/api/xy_kj_learn_center/Xy_kj_snapshot_records",
        method: "get",
        data: {
          processid: id,
          type: 2, //1-人脸认证 2-摄像头 3-验证码验证
          ...this.listQuery,
          organizeId:this.$store.getters.organizeId
        }
      }).then(res => {
        this.list = res.data.list;
        this.total = res.data.pagination.total;
        this.loading = false;
      });
    },
    previewImg(index) {
      let imgArr = this.list.map(item => item.snapshots);
      let newImgArr = imgArr.splice(index);
      return [...newImgArr, ...imgArr];
    }
  }
};
</script>
<style scoped lang="scss">
li {
  list-style: none;
}
.picture {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  li {
    width: 18%;
    height: 240px;
    border: 2px solid #ccc;
    margin: 13px;
    box-sizing: border-box;
    cursor: pointer;

    .photo {
      width: 100%;
      height: 206px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .time {
      width: 100%;
      height: 30px;
      text-align: center;
      line-height: 30px;
    }
  }
}
</style>
